<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 基本按键 -->
      <div class="button">
        <el-button size = "small" icon="el-icon-plus" @click = "addItem">创建项目</el-button>
        <el-button size = "small" icon="el-icon-time">按时间排序</el-button>
      </div>
      <!-- 项目显示区 -->
      <div>
        <el-row class="list">
          <el-col :span="8" v-for="(o, index) in 12" :key="o" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px' }">
              <div class="relative">
                <img src="../assets/images/demo.png" class="image">
                <div class="menu">
                  <el-dropdown trigger="click">
                    <span><i class="el-icon-more"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item class="clearfix" icon="el-icon-edit">
                        编辑项目
                      </el-dropdown-item>
                      <el-dropdown-item class="clearfix" icon="el-icon-delete">
                        删除项目
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 15, 30, 60]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
    </el-card>

    <!-- 创建项目对话框 -->
    <el-dialog
      title="添加项目"
      :visible.sync="addItemDialogVisible"
      width="50%"
      @close="addItemDialogClosed">
      <el-form :model="addForm"
      :rules="addFormRules" ref="addFormRef"
      label-width="100px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" prop="desc">
          <el-input type="textarea" autosize v-model="addForm.desc"></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          action="uploadURL"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          list-type="picture">
          <el-form-item label="项目封面"><el-button size="small">点击上传</el-button></el-form-item>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addItemDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addItemDialogVisible = false">确 定</el-button>
      </span>
   </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //  发送请求对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 12
      },
      //  总条数
      total: 30,
      //  项目数组
      itemList: [],
      addItemDialogVisible: false,
      addForm: {
        name: '',
        desc: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入项目名', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入项目描述', trigger: 'blur' }
        ]
      },
      uploadURL: 'https://jsonplaceholder.typicode.com/posts/',
      fileList: { name: '项目封面', url: '' }
    }
  },
  created () {
    this.getItemList()
  },
  methods: {
    async getItemList () {
      await this.$http.get()
    },
    addItem () {
      this.addItemDialogVisible = true
    },
    handleSizeChange () {},
    handleCurrentChange () {},
    addItemDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    handleRemove () {},
    handlePreview (file) {
      console.log(file)
    },
    handleSuccess () {}
  }
}
</script>

<style lang="less" scoped>
  .button {
    margin-left: 10px;
  }
  .list {
    width:111%;
  }
  .el-pagination {
    margin-top: 30px;
  }

  .tt {
    line-height:20px;
  }
  .title {
    font-size: 17px;
  }
  .time {
    font-size: 10px;
    color: #999;
    float: right;
  }
  .description {
    font-size: 10px;
    color: #666;
  }
.relative {
  position: relative;
}
.image {
  width: 100%;
  display: block;
}
.menu {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  padding: 1px;
  background-color: rgba(250,250,250,0.4);
}
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
</style>
